AnimationSheetBuilder.display を Collate に置き換えます

コンテンツ

まとめ

のAnimationSheetBuilder.displayとsheetSizeメソッドは非推奨であるため、次のように置き換える必要があります。AnimationSheetBuilder.collate。

コンテクスト

AnimationSheetBuilderテストユーティリティですアニメーションウィジェットのフレームを記録するクラス、その後、フレームを 1 つのフレームに合成しますのアニメーションシート黄金のテスト。昔ながらのやり方作曲には以下が含まれますdisplay画像を一覧表示するにはテーブルのようなウィジェットに変換し、テストを調整する表面sheetSize、そしてテーブルをキャプチャします比較用のウィジェット。新しい方法、collate、もっているフレームを直接結合する機能が追加されました比較のために画像に変換するため、必要な量が少なくなります定型コードを使用せずに小さい画像を出力します。品質の妥協。したがって、古い方法の API は次のようになります。廃止されました。

その理由collateより小さい画像を出力します。それは、古い方法ではテスト面でキャプチャが行われるためです。ピクセル比 3.0、つまり 3x3 ピクセルを使用します実際の 1 つを表すまったく同じ色のブロックピクセル、画像を必要な 9 倍の大きさにします (PNG 圧縮前)。

変更内容の説明

以下の変更が加えられました。AnimationSheetBuilderクラス：

「display」は非推奨なので使用しないでください
「sheetSize」は非推奨なので使用しないでください

移行ガイド

新しいAPIに移行するには、設定手順を変更します表面サイズとウィジェットの表示AnimationSheetBuilder.collate。

行ごとにセルを導出する

のcollate明示的な必要がありますcellsPerRow引数。1 あたりのフレーム数です。出力イメージの行。手動で数えることもできるので、または次のように計算されます。

作成時に指定したフレームの幅を確認します。AnimationSheetBuilder。たとえば、次のような場合スニペットは80です:

final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(80, 30));

ときに指定される面サイズの幅を求めます。表面サイズの設定。デフォルトは 800 です。たとえば、次のスニペットでは 600 です。

tester.binding.setSurfaceSize(animationSheet.sheetSize(600));

行ごとのフレームは 2 つの結果である必要があります。数値を割って切り捨てたもの。例えば、 600 / 80 = 7 (切り捨て) したがって、

animationSheet.collate(7)

コードを移行する

移行前のコード:

  testWidgets('Indeterminate CircularProgressIndicator', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));

    await tester.pumpFrames(animationSheet.record(
      const Directionality(
        textDirection: TextDirection.ltr,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: CircularProgressIndicator(),
        ),
      ),
    ), const Duration(seconds: 2));

    // The code starting here needs migration.

    tester.binding.setSurfaceSize(animationSheet.sheetSize());

    final Widget display = await animationSheet.display();
    await tester.pumpWidget(display);

    await expectLater(
      find.byWidget(display),
      matchesGoldenFile('material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/42767

移行後のコード (cellsPerRowは 20、800 / 40 から導出されます):

  testWidgets('Indeterminate CircularProgressIndicator', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));

    await tester.pumpFrames(animationSheet.record(
      const Directionality(
        textDirection: TextDirection.ltr,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: CircularProgressIndicator(),
        ),
      ),
    ), const Duration(seconds: 2));

    await expectLater(
      animationSheet.collate(20),
      matchesGoldenFile('material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/42767

関連するゴールデンテストの参照画像が期待されます無効になっているため、すべて更新する必要があります。新しい画像は古いものと同じである必要がありますが、 1/3スケール。

タイムライン

リリースされたバージョン: v2.3.0-13.0.pre
安定版リリース: 2.5

参考文献

API ドキュメント:

AnimationSheetBuilder
AnimationSheetBuilder.collate